<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>莫忘小说</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.9.6/css/layui.css" rel="stylesheet">
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            background-color: #f6f6f6;
        }

        .head {
            height: 80px;
            /* align-items: center; */
            background-color: #0a2336;
        }

        .logo {
            width: 50px;
            height: 50px;
            margin: 15px 10px 0 20px;
        }

        .name-img {
            width: 90px;
            /* height: 20px; */
            margin-top: 15px;
        }

        .layui-carousel {
            height: 320px;
            background-color: #ffd6c0 !important;
        }

        .swipe-item {
            text-align: center;
            background-color: #ffd6c0 !important;
        }

        .swipe-img {
            width: 1440px;
            height: 450px;
        }

        .book-list {
            width: 80%;
            margin: 20px auto;
            padding: 20px 0 0;
            background-color: #f6f6f6;
        }

        .book-item {
            display: flex;
            margin-bottom: 15px;
        }

        .image {
            width: 160px;
            height: 200px;
            margin-right: 18px;
        }

        .cont {
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .book-name {
            font-size: 24px;
            font-weight: 500;
        }

        .author {
            font-size: 16px;
            margin: 10px 0 20px 0;
        }

        .des {
            width: 100%;
            /* overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis; */
        }

        .btns {
            display: flex;
            align-items: center;
            margin-top: 10px;
            /* justify-content: center;
            */
            cursor: pointer; 
        }

        .icon {
            font-size: 16px;
        }

        .price {
            /* line-height: 35px;; */
            font-size: 22px;
            margin-right: 10px;
        }

        .zfb-btn,
        .wx-btn {
            width: 100px;
            height: 35px;
            /* margin-top: 10px; */
            margin-right: 10px;
            /* border: 1px solid #aeaeae;
            border-radius: 10px;
            box-shadow: 5px 5px 10px rgba(237, 237, 237 .8); */
        }

        .layui-btn {
            margin-top: 20px;
        }

        p {
            color: #6d7b86;
            font-size: 12px;
            margin-top: 5px;
        }

        .ban {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100px;
            background-color: #0a2336;
            margin-bottom: 15px;
            text-align: center;
        }

        a {
            font-size: 12px;
            color: #6d7b86;
        }
    </style>
</head>

<body>
    <div class="head">
        <div>
            <image class="logo"
                src="https://ziyi-static-dev.oss-cn-hangzhou.aliyuncs.com/static/pc/20240201163938.png" />
            <image class="name-img"
                src="https://ziyi-static-dev.oss-cn-hangzhou.aliyuncs.com/static/pc/20240201163948.png" />

        </div>
    </div>
    <!-- <div class="layui-carousel" id="ID-carousel-demo-1">
        <div carousel-item>
            <div class="swipe-item">
                <image class="swipe-img"
                    src="https://ziyi-static-dev.oss-cn-hangzhou.aliyuncs.com/static/pc/A20240201143420.png" />
            </div>
        </div>
    </div> -->
    <div class="swipe-item">
        <image class="swipe-img"
            src="https://ziyi-static-dev.oss-cn-hangzhou.aliyuncs.com/static/pc/A20240201143420.png" />
    </div>

    <div class="book-list">
        <div class="book-item">
            <image class="image"
                src="https://ziyi-static-dev.oss-cn-hangzhou.aliyuncs.com/static/pc/20240201163953.png">
            </image>
            <div class="cont">
                <div class="book-name">《幻境之门》</div>
                <div class="author">奇幻</div>
                <div class="des">
                    在一次神秘的夜晚，普通少年李辰发现了一扇通往异世界的神秘之门。穿越之后，他发现自己拥有了神秘的魔法力量，并踏上了一场波澜壮阔的玄幻冒险。在异世界的幻境之门背后，隐藏着无尽的谜团和惊人的秘密。李辰将与各种异族、魔兽展开激烈的对抗，揭示世界的真相，而他内心的善恶之战也将决定整个幻境的命运。
                </div>
                <div class="btns">
                    <span class="price"> <span class="icon">￥</span>58.80元 </span>
                    <image class="zfb-btn btn"
                        src="https://ziyi-static-dev.oss-cn-hangzhou.aliyuncs.com/static/pc/20240201165324.png" />
                    <image class="wx-btn btn"
                        src="https://ziyi-static-dev.oss-cn-hangzhou.aliyuncs.com/static/pc/20240201165338.png" />
                </div>
                <p>购买完成即可下载完整书记</p>
            </div>
        </div>
        <div class="book-item">
            <image class="image"
                src="https://ziyi-static-dev.oss-cn-hangzhou.aliyuncs.com/static/pc/20240201163957.png">
            </image>
            <div class="cont">
                <div class="book-name">《龙魂诀》</div>
                <div class="author">玄幻仙侠</div>
                <div class="des">
                    千年一遇的天才少年龙翔，意外觉醒了沉睡千年的龙魂之力。他身负着龙族的宿命，踏上了通往神秘龙域的征途。在那里，他将面对强大的敌人、古老的诅咒，以及龙族的光荣与衰落。《龙魂诀》是一部融合了仙侠与神话元素的玄幻巨作，讲述了一个普通少年成长为龙族救世英雄的传奇故事。
                </div>
                <div class="btns">
                    <span class="price"> <span class="icon">￥</span>79.00元 </span>
                    <image class="zfb-btn btn"
                        src="https://ziyi-static-dev.oss-cn-hangzhou.aliyuncs.com/static/pc/20240201165324.png" />
                    <image class="wx-btn btn"
                        src="https://ziyi-static-dev.oss-cn-hangzhou.aliyuncs.com/static/pc/20240201165338.png" />
                </div>
                <p>购买完成即可下载完整书记</p>
            </div>
        </div>
        <div class="book-item">
            <image class="image"
                src="https://ziyi-static-dev.oss-cn-hangzhou.aliyuncs.com/static/pc/20240201135032.png">
            </image>
            <div class="cont">
                <div class="book-name">《幻神之战》</div>
                <div class="author">修仙</div>
                <div class="des">
                    在一个混沌的世界中，神秘的幻神降临，为了夺取神之力量，引发了一场惊天的战争。普通青年叶凡卷入了这场神祇之争，他得到了一枚能够唤醒幻神力量的神秘符文。随着力量的觉醒，叶凡的命运也发生了翻天覆地的改变。《幻神之战》将带领读者穿越神话传说，探寻古老神明的秘密，揭开幻神的真正身份，为世界的命运书写崭新的篇章。
                </div>
                <div class="btns">
                    <span class="price"> <span class="icon">￥</span>65.00元 </span>
                    <image class="zfb-btn btn"
                        src="https://ziyi-static-dev.oss-cn-hangzhou.aliyuncs.com/static/pc/20240201165324.png" />
                    <image class="wx-btn btn"
                        src="https://ziyi-static-dev.oss-cn-hangzhou.aliyuncs.com/static/pc/20240201165338.png" />
                </div>
                <p>购买完成即可下载完整书记</p>
            </div>
        </div>
    </div>

    <div class="ban">
        <p>杭州子翼网络科技有限公司</p>
        <!-- <p>浙ICP备2024059717号-1版权所有</p> -->
        <a href="http://beian.miit.gov.cn/">备案号：浙ICP备2024059717号-1</a>
    </div>

    <!-- <div class="layui-carousel" id="ID-carousel-demo-2">
  <div carousel-item>
    <div>条目1</div>
    <div>条目2</div>
  </div>
</div> -->

    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.9.6/layui.js"></script>
    <script>
        layui.use(function () {
            var carousel = layui.carousel;
            // 渲染 - 常规轮播
            carousel.render({
                elem: '#ID-carousel-demo-1',
                width: 'auto',
                height: '450'
            });

            // 渲染 - 设置时间间隔、动画类型、宽高度等属性
            carousel.render({
                elem: '#ID-carousel-demo-2',
                interval: 1800,
                anim: 'fade',
                width: 'auto',
                height: '120px'
            });
        });
    </script>

</body>

</html>